<div class="mt-3">

    <div class="btn-group" role="group" aria-label="Button group with nested dropdown">

        <button type="button" class="btn btn-primary" (click)="list.click($event)">
            <fa-icon class="relative-top-2px" [icon]="list.icon"></fa-icon>
            <span class="align-middle ml-1">{{list.nickname}}</span>
        </button>

        <button type="button" class="btn btn-primary" (click)="reList.click($event)">
            <fa-icon class="relative-top-1px" [icon]="reList.icon"></fa-icon>
        </button>

        <button type="button" class="btn btn-primary" (click)="add.click($event)">
            <fa-icon class="relative-top-2px" [icon]="add.icon"></fa-icon>
            <span class="align-middle ml-1">{{add.nickname}}</span>
        </button>

        <button type="button" class="btn btn-primary" (click)="delete.click($event)">
            <fa-icon class="relative-top-2px" [icon]="delete.icon"></fa-icon>
            <span class="align-middle ml-1">{{delete.nickname}}</span>
        </button>

        <button type="button" class="btn btn-primary" (click)="modify.click($event)">
            <fa-icon class="relative-top-2px" [icon]="modify.icon"></fa-icon>
            <span class="align-middle ml-1">{{modify.nickname}}</span>
        </button>

        <div class="btn-group" dropdown>
            <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle" aria-controls="dropdown-basic">
                <fa-icon class="relative-top-2px" [icon]="audit.icon"></fa-icon>
                <span class="align-middle ml-1">{{audit.nickname}}</span>
            </button>
            <ul *dropdownMenu class="dropdown-menu"
                role="menu" aria-labelledby="button-basic">
                <li role="menuitem" (click)="audit.submit.click($event)"><a class="dropdown-item">
                    <fa-icon class="relative-top-2px" [icon]="audit.submit.icon"></fa-icon>
                    <span class="align-middle ml-1">{{audit.submit.nickname}}</span></a></li>
                <li role="menuitem" (click)="audit.audit.click($event)"><a class="dropdown-item">
                    <fa-icon class="relative-top-2px" [icon]="audit.audit.icon"></fa-icon>
                    <span class="align-middle ml-1">{{audit.audit.nickname}}</span></a></li>
                <li role="menuitem" (click)="audit.reject.click($event)"><a class="dropdown-item">
                    <fa-icon class="relative-top-2px" [icon]="audit.reject.icon"></fa-icon>
                    <span class="align-middle ml-1">{{audit.reject.nickname}}</span>
                </a></li>
            </ul>
        </div>
        <div class="btn-group" dropdown>
            <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle" aria-controls="dropdown-basic">
                <fa-icon class="relative-top-2px" [icon]="data.icon"></fa-icon>
                <span class="align-middle ml-1">{{data.nickname}}</span>
            </button>
            <ul *dropdownMenu class="dropdown-menu"
                role="menu" aria-labelledby="button-basic">
                <li role="menuitem"><a class="dropdown-item">
                    <fa-icon class="relative-top-2px" [icon]="data.export.icon"></fa-icon>
                    <span class="align-middle ml-1">{{data.export.nickname}}</span></a></li>
                <li role="menuitem"><a class="dropdown-item">
                    <fa-icon class="relative-top-2px" [icon]="data.import.icon"></fa-icon>
                    <span class="align-middle ml-1">{{data.import.nickname}}</span></a></li>
            </ul>
        </div>
        <div class="btn-group" dropdown>
            <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle" aria-controls="dropdown-basic">
                <fa-icon class="relative-top-2px" [icon]="report.icon"></fa-icon>
                <span class="align-middle ml-1">{{report.nickname}}</span>
            </button>
            <ul *dropdownMenu class="dropdown-menu"
                role="menu" aria-labelledby="button-basic">
                <li role="menuitem" (click)="report.chartLine.click($event)"><a class="dropdown-item">
                    <fa-icon class="relative-top-2px" [icon]="report.chartLine.icon"></fa-icon>
                    <span class="align-middle ml-1">{{report.chartLine.nickname}}</span></a></li>
                <li role="menuitem" (click)="report.chartArea.click($event)"><a class="dropdown-item">
                    <fa-icon class="relative-top-2px" [icon]="report.chartArea.icon"></fa-icon>
                    <span class="align-middle ml-1">{{report.chartArea.nickname}}</span></a></li>
                <li role="menuitem" (click)="report.chartPie.click($event)"><a class="dropdown-item">
                    <fa-icon class="relative-top-2px" [icon]="report.chartPie.icon"></fa-icon>
                    <span class="align-middle ml-1">{{report.chartPie.nickname}}</span></a></li>
            </ul>
        </div>
        <button type="button" class="btn btn-primary" (click)="help.click($event)">
            <fa-icon class="relative-top-1px" [icon]="help.icon"></fa-icon>
        </button>

    </div>

</div>
